/**
 * Created by Scott on 2017/3/29.
 */
import React from 'react';
import { Table, Button, Popconfirm } from 'antd';
import $ from 'jquery';
import MenuModal from './Modal/MemuModal';

// rowSelection objects indicates the need for row selection
const rowSelection = {
    onChange: ( selectedRowKeys, selectedRows ) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: ( record, selected, selectedRows ) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: ( selected, selectedRows, changeRows ) => {
        console.log(selected, selectedRows, changeRows);
    }
};

class MenuManager extends React.Component {

    constructor () {
        super();
        this.state = {
            menus: [],
            loading: false
        }
        this.onDelete = this.onDelete.bind(this);
        this.onEdit = this.onEdit.bind(this);
        this.onAdd = this.onAdd.bind(this);
    }

    componentWillMount () {
        const self = this;
        $.ajax({
            type: "GET",
            url: "/api/SysMenu/findAll",
            contentType: "application/json;charset=utf-8"
        }).then(function ( result ) {
            self.setState({menus: result});
        });
    }

    onDelete ( index ) {

    }

    onEdit ( recode ) {
    }

    onAdd () {
    }

    render () {
        const columns = [{
            title: '菜单名称',
            dataIndex: 'menuName',
            key: 'menuName',
            width: '30%'
        }, {
            title: 'URL',
            dataIndex: 'url',
            key: 'url',
            width: '30%'
        },
            {
                title: '操作',
                width: '40%',
                render: ( text, record, index ) => {
                    return (
                        this.state.menus.length > 0  ?
                            (<span>
                                    <MenuModal
                                        record={ record }
                                        modelType="edit"
                                        modalOk={ this.onEdit}
                                        >
                                        <Button type="primary">
                                            编辑
                                        </Button> 
                                    </MenuModal>
                                    <Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(record.id)}>
                                        <Button type="primary">删除</Button>
                                    </Popconfirm>
                                </span>

                            ) : null
                    );
                }
            }];

        return (
            <span>
                 <MenuModal
                     record={ {} }
                     modelType="add"
                     modalOk={ this.onAdd}> 
                     <Button type="primary">
                         新增
                     </Button> 
                 </MenuModal>
                <Table bordered size='small' pagination={false} rowKey={record => record.id} columns={columns}
                       dataSource={this.state.menus}
                       loading={this.state.loading}/>
            </span>
        );
    }
}
export default MenuManager;